import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Grid } from '@alifd/next';
import { enquireScreen } from 'enquire-js';
import styles from './index.module.scss';

import Video from './Video';
import VideoList from './VideoList';


const { Col, Row } = Grid;

export default class SimpleVideoPlayer extends Component {
  static displayName = 'SimpleVideoPlayer';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      isMobile: false,
      currentVideo: {
        title: '实验介绍视频',
        duration: '03:00',
        sources: [
          {
            src: 'http://www.techweizhi.com/document/financial/video/财大-教学项目介绍视频.mp4',
            type: 'video/mp4',
          },
        ],
      },
      videoLists: mockVideoData,
    };
  }

  componentDidMount() {
    this.enquireScreenRegister();
  }

  enquireScreenRegister = () => {
    const mediaCondition = 'only screen and (max-width: 720px)';

    enquireScreen((mobile) => {
      this.setState({
        isMobile: mobile,
      });
    }, mediaCondition);
  };

  switchVideo = (selectVideo) => {
    this.setState({
      reloadVideo: true,
      currentVideo: selectVideo,
    });
    // 每次切换 video 需要将 video 标签彻底销毁重新渲染，否则不会生效
    setTimeout(() => {
      this.setState({
        reloadVideo: false,
      });
    }, 100);
  };

  render() {
    const { isMobile } = this.state;
    return (
      <div className="simple-video-player">
        <IceContainer>
          <Row gutter={20} wrap>
            <Col m="16" xxs="24">
              <div
                className={ `${styles.videoWrapper} ${(isMobile ? styles.videoWrapperMobile : {})}`}

              >
                {!this.state.reloadVideo && (
                  <Video
                    {...this.state.currentVideo}
                    className={`${styles.video} ${(isMobile ? styles.videoMobile : {})}`}

                  />
                )}
              </div>
            </Col>
            <Col m="8" xxs="24">
              <VideoList
                currentVideo={this.state.currentVideo}
                list={this.state.videoLists}
                onClick={this.switchVideo}
              />
            </Col>
          </Row>
        </IceContainer>
      </div>
    );
  }
}


const mockVideoData = [
  {
    poster: require('./images/back_1.jpg'),
    title: '实验介绍视频',
    duration: '03:00',
    sources: [
      {
        src: 'http://www.techweizhi.com/document/financial/video/财大-教学项目介绍视频.mp4',
        type: 'video/mp4',
      },
    ],
  },
  {
    poster: require('./images/back_2.jpg'),
    title: '实验引导视频',
    duration: '06:23',
    sources: [
      {
        src: 'http://www.techweizhi.com/document/financial/video/财大-教学项目引导视频.mp4',
        type: 'video/mp4',
      },
    ],
  },
];
